iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

JavaScript 奇奇怪怪的核心觀念系列 第 6

(Day6) 強制轉型&顯性轉型

  • 分享至 

  • xImage
  •  

動態型別

前面有介紹 JavaScript 資料分成七種原始型別以及物件型別,關於型別 JavaScript 有一種廣為人知的特性:動態型別。

JavaScript 之所以會是動態行別,就要提到到實做中 JavaScript 最容易碰上的底層問題之一 『強制轉型』,而 強制轉型 又分成兩種

  • 顯性轉型(Explicit Conversion ) ,故名思義就是我們實際在程式碼中,會看有明確對變數執行轉型動作。
  • 隱含轉型 ( Implicit Conversion ),和上顯性轉型與之相反概念,就是看不到單從程式碼,在程式碼上沒看到轉型動作,但 JavaScript 中偷偷幫你轉型的方法。

今天就會介紹大致上有哪些語法是顯性轉型,下篇則會再介紹隱含轉型。

而這兩種術語並沒有特別明確的規範,他只是相對上的術語,因此有些狀況看起來是 :似隱似顯的 但其實不用太糾結是分類在哪種,知道如何使用就沒有問題了,兩種轉型範例:

var test1 = '123'
test1 = Number(test1 )//顯性轉型

var test2 = 456
test2 = test2 + '1' //隱性轉型

顯性轉型

在 『你不懂JS』一書中是將顯性轉型分成以下三種:

  • 顯性轉型 : Strings <--> Numbers
  • 顯性轉型 :数字字符串
  • 顯性轉型 :Boolean

『你不懂JS』一書這種分法確實比較全面,但對我們這些腦袋比較簡單的人來說,反而不好理解,這邊試者改成比較容易理解三種:

  • 顯性轉型 :轉成 String
  • 顯性轉型 :轉成 Number
  • 顯性轉型 :轉成 Boolean

這邊也在根據上面三種分類,稍微說明有哪些語法。

轉成 String

  • 使用 String() 方法
var test3 = 123
test = String(test3)
typeof(test3 ) // '123'
  • 陣列原型的 toString()
var array = ["R","y","d","e","r"]
var test4 = array.toString() //'R,y,d,e,r'

轉成 Number

  • 使用 Number()parseInt() 方法
var string = '123'
var test5 = Number(string) //123
var test6 = parseInt(string) // 123
  • 使用 使用一元正/負運算子 +-
var string = '123'
var test7 = + string //123

不過這種方法確實容易跟 二元運 算術運算子的 - 寫法搞混,也因此實做確實比較少看到這種寫法。

轉成 Boolean

  • 使用 Boolean() 方法
var string = 'test'
var array =[]
var number = 0
var not = null
var boolean1 = Boolean(string) // true
var boolean2 = Boolean(array) // true
var boolean3 = Boolean(number) // false
var boolean4 = Boolean(not)//false

以上大概就是常見的顯性轉型,值得一提的是使用 new String()new Number() 等等的 new 建構式方法他們並不算在強制轉型的範疇中,因為這些建構式製作出來的都會物件型別的資料。

當然還有一種狀況是,將變數的值調整成另一種型別的值,這種作法,也是屬於顯性轉換的一種,不過這部分一看就知道,因此上述都沒有特別提出來,例如:

var test8 = 123
test8 = 'test'

參考資料


上一篇
(Day5) 原始型別及物件型別
下一篇
(Day7) 隱含轉型 - 偷偷轉換的 Strings 與 Numbers 類型
系列文
JavaScript 奇奇怪怪的核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言